
<!--
    被举报账户管理页面
 -->
 <template>
  <div>
    <el-card style="margin-bottom: 10px">
      <el-input
        v-model="queryArticleReport.reportType"
        style="width: 200px"
        placeholder="请输入举报原因"
        suffix-icon="el-icon-message"
      ></el-input>
      <el-button
        class="custom-button ml-10"
        icon="el-icon-search"
        @click="load()"
        >搜索</el-button
      >
    </el-card>
    <!-- 表格数据 -->
    <el-card>
      <el-table :data="tableData" border stripe height="600">
        <el-table-column
          prop="reportingUserName"
          label="被举报人名称"
          width="120"
        />
        <el-table-column
          prop="reportedUserName"
          label="举报人名称"
          width="120"
        />
        <el-table-column prop="reportType" label="举报原因" width="160" />
        <el-table-column prop="reportStatus" label="举报状态" width="160">
          <template slot-scope="scope">
            <el-tag effect="plain" v-if="scope.row.reportStatus == 2"
              >未处理</el-tag
            >
            <el-tag
              effect="plain"
              class="pass_button"
              type="success"
              v-if="scope.row.reportStatus == 1"
              >已处理</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="processingResult"
          label="处理结果"
          width=""
          align="center"
        >
          <template slot-scope="scope">
            <el-tag
              class="pass_button1"
              effect="plain"
              v-if="scope.row.processingResult == 1"
              >同意</el-tag
            >
            <el-tag
              type="danger"
              effect="plain"
              v-if="scope.row.processingResult == 2"
              >驳回</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="processingTime" label="处理时间" width="160" />
        <el-table-column prop="rejectionReason" label="驳回原因" width="160" />
        <el-table-column prop="processor" label="处理人员" width="120" />
        <el-table-column label="操作" width="320">
          <template slot-scope="scope">
            <el-button
              class="pass_button"
              @click="details(scope.row)"
              icon="el-icon-info"
              >详情
            </el-button>
            <div
              style="display: inline-block;margin-left: 10px;"
              v-if="scope.row.reportStatus == 2"
            >
              <el-button
                class="pass_button"
                @click="delReportInfo(scope.row)"
                icon="el-icon-check"
                >同意
              </el-button>
              <el-button
                class="pass_button"
                @click="updatetty(scope.row)"
                icon="el-icon-close"
                >驳回</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="查看举报信息" :visible.sync="detailsViews" center>
      <el-descriptions :model="updateForm" :column="1" size="medium" border>
        <el-descriptions-item label="举报人名称">
          {{ updateForm.reportingUserName }}
        </el-descriptions-item>
        <el-descriptions-item label="被举报人名称">
          {{ updateForm.reportedUserName }}
        </el-descriptions-item>
        <el-descriptions-item label="举报类型">
          {{ updateForm.reportType }}
        </el-descriptions-item>
        <el-descriptions-item label="举报详情">
          {{ updateForm.reportDetails }}
        </el-descriptions-item>
        <el-descriptions-item label="举报时间">
          {{ updateForm.reportTime }}
        </el-descriptions-item>
        <el-descriptions-item label="处理时间">
          {{ updateForm.reportTime }}
        </el-descriptions-item>
        <el-descriptions-item label="举报时间">
          {{ updateForm.processingTime }}
        </el-descriptions-item>
        <el-descriptions-item label="驳回原因">
          {{ updateForm.rejectionReason }}
        </el-descriptions-item>
        <el-descriptions-item label="处理人员">
          {{ updateForm.processor }}
        </el-descriptions-item>
        <template slot="extra">
          <el-button @click="detailsViews = false">关闭</el-button>
        </template>
      </el-descriptions>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="reporeView" width="40%" center>
      <el-form :model="updateForm" ref="updateForm">
        <el-form-item label="驳回原因" prop="rejectionReason">
          <el-input
            v-model="updateForm.rejectionReason"
            auto-complete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ReporeView = false">取 消</el-button>
        <el-button type="primary" @click="update(row)">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination
      class="pageAll"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="text-align: center"
    >
    </el-pagination>
  </div>
</template>
<script>
// import  request  from '@/utils/request.js'
import { v4 as uuidv4 } from "uuid";
import dateUtil from "../../util/date";
export default {
  data() {
    return {
      // 模糊查实体对象
      queryArticleReport: {
        reportType: "",
      },
      userId: "",
      total: 0, // 初始值
      toUserId: "",
      // type: "check-person", //系统信息
      avatarUrl: "",
      inceptId: 1,
      type: "app", //系统信息
      toUserId: "",
      checkType: 2,
      id: 0,
      // 消息
      content: "您的举报成功该用户已收到惩罚",
      contents: "您的举报审核员审核为失败请核对后再次举报",
      contentty: "警告：已发现您违反用户协议如再有违规行为将注销该账号",
      inceptIds: [],
      beforeAvatarUpload: "",
      reporeView: false,
      reportingUserId: "",
      reportedUserId: "",
      msg: [],
      title: "",
      handleAvatarSuccess: "",
      detailsViews: false, // 被举报账号详情弹框
      Fileimage: "", // 添加时赋值的
      Fileimage1: "", // 添加时赋值的
      imageFile1: "", // 图片路径回显
      binId: "",
      imageFile2: "", // 图片路径回显
      currentPage4: 1, // 默认第几页
      // 表格数据
      tableData: [],
      // multipleSelection:[],
      pageNum: 1,
      pageSize: 5,
      rejectionReason: "",
      total: 0,
      avatarUrl: "",
      // msg:[],
      // 模糊查搜索框数值
      sousuofrom: {
        reportedUserId: "",
      },
      updateForm: {
        id: "",
        reportedUserId: "",
        reportingUserId: "",
        reportType: "",
        reportDetails: "",
        reportScreenshot: "",
        reportTime: "",
        reportStatus: "",
        processingTime: "",
        processingResult: "",
        rejectionReason: "",
        processor: "",
        restoreId: "",
        reportingUserName: "",
        reportedUserName: "",
      },
      rules: {
        nickname: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          { min: 1, max: 6, message: "长度在 1 到 6个字符", trigger: "blur" },
        ],
      },
    }; // return
  },
  mounted() {
    this.load();

    this.processor = window.sessionStorage.getItem("loginName");
  },
  // 方法集合
  methods: {
    rejectViews(row) {
      this.reporeView = true;
      this.updateForm = JSON.parse(JSON.stringify(row));
    },
    details(row) {
      // 查询被举报账号信息详情
      this.detailsViews = true;
      this.updateForm = JSON.parse(JSON.stringify(row));
      this.imageFile1 = this.$imageUrl + row.reportScreenshot;
    },
    myMessage(type, message) {
      this.$message({
        message: message,
        type: type,
      });
    },
    load() {
      // 查询被举报账号信息
      this.$axios
        .get("/report/getUserReportsBy", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            reportType: this.queryArticleReport.reportType,
          },
        })
        .then((res) => {
          this.tableData = res.data.data.content;
          this.total = res.data.data.totalSize;
        })
        .catch((err) => {});
    },
    //审核同意
    delReportInfo(row) {
      this.$prompt("请输入原因", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          // 同意举报申请
          this.$axios
            .post("/report/userReport", {
                id: row.id,
                rejectionReason: value,
                processor: this.processor,
            })
            .then((res) => {
              if (res.data) {
                this.load();
                this.sendMsg(row.reportingUserId);
                this.sendMsgseqw(row.reportedUserId, value);
              } else {
                this.$message.error("失败");
              }
            });
        })
        .catch((res) => {
          this.myMessage("info", "已取消删除");
        });
    },
    updatetty(row) {
      // 驳回
      this.$confirm("此操作将驳回举报人的申请, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .post("/report/userReportReject", {
              id: row.id,
              processor: this.processor,
            })
            .then((res) => {
              if (res.data.flag) {
                this.load();
                this.sendMsgs(row.reportingUserId);
                this.myMessage("success", "操作成功"); // 添加或修改成功提示
                this.reporeView = false; // 关闭窗口

                // this.id.reportingUserId = id.toUserId
              } else {
                this.myMessage("warning", res.data.code);
              }
            })
            .catch((res) => {});
        })
        .catch((err) => {});
    },

    // 发送消息 通过 发送举报人
    sendMsg(reportingUserId) {
      if (this.content.trim() !== "") {
        let lt = {
          toUserId: reportingUserId, //发送人
          checkReason: this.content, // 发送信息内容
          checkType: this.checkType,
          type: "check-person",
          uuid: this.reportingUserId + uuidv4(),
          createTime: dateUtil.getMinuteNow(), //获取现在时间
          isRead: 0,
        };
        // 发送消息
        this.$websocket.ws.send(JSON.stringify(lt));
      } else {
        // this.message("不能发送空消息", "warning");
        // 清除文本框空格
        this.content = this.content.trim();
      }
    },
    //驳回发送给举报人
    sendMsgs(reportingUserId) {
      if (this.contents.trim() !== "") {
        let lt = {
          toUserId: reportingUserId, //发送人
          checkReason: this.contents, // 发送信息内容
          checkType: this.checkType,
          type: "check-person",
          uuid: this.reportingUserId + uuidv4(),
          createTime: dateUtil.getMinuteNow(), //获取现在时间
          isRead: 0,
        };
        // 发送消息
        this.$websocket.ws.send(JSON.stringify(lt));
      } else {
        this.message("不能发送空消息", "warning");
        // 清除文本框空格
        this.content = this.content.trim();
      }
    },

    // 发送消息 给被举报人警告信息
    sendMsgseqw(reportedUserId, text) {
      if (this.contentty.trim() !== "") {
        let lt = {
          toUserId: reportedUserId, //发送人
          checkReason: this.contentty + ",原因是：" + text, // 发送信息内容
          checkType: this.checkType,
          type: "check-person",
          uuid: this.reportedUserId + uuidv4(),
          createTime: dateUtil.getMinuteNow(), //获取现在时间
          isRead: 0,
        };
        // 发送消息
        this.$websocket.ws.send(JSON.stringify(lt));
      } else {
        this.message("不能发送空消息", "warning");
        // 清除文本框空格
        this.content = this.content.trim();
      }
    },

    handleSizeChange(val) {
      // 改变每页条数
      this.pageSize = val;
      this.load();
    },
    handleCurrentChange(val) {
      // 改变当前页
      this.pageNum = val;
      this.load();
    },
  },
};
</script>

<style scoped>
html.body {
  height: 100%;
}
.ml-5 {
  margin-left: 5px;
}
.mr-5 {
  margin-right: 5px;
}
.pd-10 {
  padding: 10px 0;
}
</style>
